<template>
  <div>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-cont-center">
              <div class="grid-num">{{ cadreCount }}</div>
              <div>驻村干部总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-cont-center">
              <div class="grid-num">{{ townsCount }}</div>
              <div>村镇总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-cont-center">
              <div class="grid-num">{{ villageCount }}</div>
              <div>村户总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="grid-content">
            <div class="grid-cont-center">
              <div class="grid-num">{{ organizationCount }}</div>
              <div>工作队总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="12">
        <h3 class="mgb20">村户重点人员比例</h3>
        <div style="background-color: white">
          <ve-pie :data="villageCategory" :theme="options"></ve-pie>
        </div>
      </el-col>
      <el-col :span="12">
        <h3 class="mgb20">干部政治面貌划分比例</h3>
        <div style="background-color: white">
          <ve-pie :data="cadrePoliticalStatus"></ve-pie>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="12">
        <h3 class="mgb20">村户住房情况柱状图</h3>
        <div style="background-color: white">
          <ve-histogram :data="housing" :theme="option1"></ve-histogram>
        </div>
      </el-col>
      <el-col :span="12">
        <h3 class="mgb20">村镇村户人数柱状图</h3>
        <div style="background-color: white">
          <ve-histogram :data="townshipimg" :theme="option1"></ve-histogram>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="12">
        <h3 class="mgb20">走访村户家庭情况</h3>
        <div style="background-color: white">
          <ve-line :data="visitVillage"></ve-line>
        </div>
      </el-col>
      <el-col :span="12">
        <h3 class="mgb20">村镇人口流动线形图</h3>
        <div style="background-color: white">
          <ve-line :data="PopulationAffiliatedVillage"></ve-line>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {
  getAllCadre,
  getAllTowns,
  getAllVillage,
  getAllOrganization,
  getAllMember,
  getVisitorWork,
  getAllPopulationFlow,
} from "../api/index";
export default {
  data() {
    return {
      cadreCount: 0,
      townsCount: 0,
      villageCount: 0,
      organizationCount: 0,
      memberPoliticalStatusCount: 0,
      VisitorCount: 0,
      PopulationCount: 0,
      village: [], // 村户所有用户
      memberPoliticalStatus: [], //成员政治面貌所有
      Visitor: [], //走访户工作所有村户
      Population: [], // 人口流动所有人数
      villageCategory: {
        columns: ["重点人员", "总数"],
        rows: [
          { 重点人员: "是", 总数: 0 },
          { 重点人员: "否", 总数: 0 },
        ],
      },
      options: {
        color: ["#87cefa", "#ffc0cb"],
      },
      // 政治面貌比例
      cadrePoliticalStatus: {
        columns: ["政治面貌", "总数"],
        rows: [
          { 政治面貌: "中共党员", 总数: 0 },
          { 政治面貌: "中共预备党员", 总数: 0 },
          { 政治面貌: "共青团员", 总数: 0 },
        ],
      },
      housing: {
        columns: ["住房情况", "总数"],
        rows: [
          { 住房情况: "1间", 总数: 0 },
          { 住房情况: "2间", 总数: 0 },
          { 住房情况: "3间", 总数: 0 },
          { 住房情况: "4间", 总数: 0 },
          { 住房情况: "5间", 总数: 0 },
          { 住房情况: "6间", 总数: 0 },
        ],
      },
      townshipimg: {
        columns: ["村镇类别", "村户总数"],
        rows: [
          { 村镇类别: "南皮镇", 村户总数: 0 },
          { 村镇类别: "冯家口镇", 村户总数: 0 },
          { 村镇类别: "寨子镇", 村户总数: 0 },
          { 村镇类别: "鲍官屯镇", 村户总数: 0 },
          { 村镇类别: "王寺镇", 村户总数: 0 },
          { 村镇类别: "乌马营镇", 村户总数: 0 },
          { 村镇类别: "潞灌镇", 村户总数: 0 },
          { 村镇类别: "大浪淀乡", 村户总数: 0 },
          { 村镇类别: "刘八里乡", 村户总数: 0 },
        ],
      },
      option1: {
        color: ["#87cefa"],
      },
      visitVillage: {
        columns: ["家庭情况", "总数"],
        rows: [
          { 家庭情况: "一般", 总数: 0 },
          { 家庭情况: "困难", 总数: 0 },
          { 家庭情况: "极度困难", 总数: 0 },
          { 家庭情况: "建档立卡户", 总数: 0 },
          { 家庭情况: "正常", 总数: 0 },
        ],
      },
      PopulationAffiliatedVillage: {
        columns: ["所属村镇", "总数"],
        rows: [
          { 所属村镇: "南皮镇", 总数: 0 },
          { 所属村镇: "冯家口镇", 总数: 0 },
          { 所属村镇: "寨子镇", 总数: 0 },
          { 所属村镇: "鲍官屯镇", 总数: 0 },
          { 所属村镇: "王寺镇", 总数: 0 },
          { 所属村镇: "乌马营镇", 总数: 0 },
          { 所属村镇: "潞灌镇", 总数: 0 },
          { 所属村镇: "大浪淀乡", 总数: 0 },
          { 所属村镇: "刘八里乡", 总数: 0 },
        ],
      },
    };
  },
  created() {},
  mounted() {
    this.getCadre();
    this.getTowns();
    this.getVillage();
    this.getOrganization();
    this.getVillageCategory();
    this.getCadrePoliticalStatus();
    this.getTownshipimg();
    this.getVisitVillage();
    this.getAffiliatedVillage();
  },
  methods: {
    // 获取驻村干部总数
    getCadre() {
      getAllCadre().then((res) => {
        this.cadre = res;
        this.cadreCount = res.length;
      });
    },
    // 根据性别获取驻村干部数量
    setFamilyCategory(keyPersonnel, val) {
      let count = 0;
      for (let item of val) {
        if (keyPersonnel === item.keyPersonnel) {
          count++;
        }
      }
      return count;
    },

    // 根据干部政治面貌获取干部人数
    setPoliticalStatus(politicalStatus, val) {
      let count = 0;
      for (let item of val) {
        if (politicalStatus === item.politicalStatus) {
          count++;
        }
      }
      return count;
    },
    // 获取村镇数量
    getTowns() {
      getAllTowns().then((res) => {
        this.townsCount = res.length;
      });
    },
    // 获取村户数量
    getVillage() {
      getAllVillage().then((res) => {
        this.villageCount = res.length;
      });
    },
    // 获取工作队总数
    getOrganization() {
      getAllOrganization().then((res) => {
        this.organizationCount = res.length;
      });
    },

    // 获取村户重点人员分配比例
    getVillageCategory() {
      getAllVillage().then((res) => {
        this.village = res;
        this.villageCount = res.length;
        this.villageCategory.rows[0]["总数"] = this.setFamilyCategory(
          1,
          this.village
        );
        this.villageCategory.rows[1]["总数"] = this.setFamilyCategory(
          0,
          this.village
        );
        for (let item of res) {
          this.getByHourseing(item.housingSituation);
        }
      });
    },
    // 根据干部政治面貌分配比例
    getCadrePoliticalStatus() {
      getAllMember().then((res) => {
        this.memberPoliticalStatus = res;
        this.memberPoliticalStatusCount = res.length;
        this.cadrePoliticalStatus.rows[0]["总数"] = this.setPoliticalStatus(
          0,
          this.memberPoliticalStatus
        );
        this.cadrePoliticalStatus.rows[1]["总数"] = this.setPoliticalStatus(
          1,
          this.memberPoliticalStatus
        );
        this.cadrePoliticalStatus.rows[2]["总数"] = this.setPoliticalStatus(
          2,
          this.memberPoliticalStatus
        );
      });
    },
    getByHourseing(housingSituation) {
      for (let item of this.housing.rows) {
        if (housingSituation.includes(item["住房情况"])) {
          item["总数"]++;
        }
      }
    },
    // 获取村镇村户多少
    getTownshipimg() {
      getAllVillage().then((res) => {
        this.village = res;
        this.villageCount = res.length;
        for (let item of res) {
          this.getByTownshipimg(item.township);
        }
      });
    },
    getByTownshipimg(township) {
      for (let item of this.townshipimg.rows) {
        if (township.includes(item["村镇类别"])) {
          item["村户总数"]++;
        }
      }
    },
    // 获取走访户工作时，得到家庭情况
    getVisitVillage() {
      getVisitorWork().then((res) => {
        this.Visitor = res;
        this.VisitorCount = res.length;
        for (let item of res) {
          this.getByFamilySituation(item.familySituation);
        }
      });
    },
    getByFamilySituation(familySituation) {
      for (let item of this.visitVillage.rows) {
        if (familySituation.includes(item["家庭情况"])) {
          item["总数"]++;
        }
      }
    },

    // 获取人口流动所驻村镇人口
    getAffiliatedVillage() {
      getAllPopulationFlow().then((res) => {
        this.Population = res;
        this.PopulationCount = res.length;
        for (let item of res) {
          this.getByAffiliatedVillage(item.affiliatedVillage);
        }
      });
    },
    getByAffiliatedVillage(affiliatedVillage) {
      for (let item of this.PopulationAffiliatedVillage.rows) {
        if (affiliatedVillage.includes(item["所属村镇"])) {
          item["总数"]++;
        }
      }
    },
  },
};
</script>
<style scoped>
.grid-content {
  display: flex;
  align-items: center;
  height: 50px;
}
.grid-cont-center {
  flex: 1;
  text-align: center;
  font-size: 16px;
  color: darkgray;
}
.grid-num {
  font-size: 30px;
  font-weight: bold;
}
</style>
